import React, { useState, useEffect } from "react"
import { history } from "umi"
import { useLocation, useHistory } from "react-router"
import { Table, Button, Input, Pagination, message, Empty } from "antd"
import { userPageList, IConsultGroupUserPageList, consultGroupUserPageLisRecord } from "@/services/consultationTeam"
import styles from "./teamMember.less"

const teamMember: React.FC = () => {

  /** *分页用***/
  const [current, setCurrent] = useState<number>(1) // 当前第几页
  const [size, setSize] = useState<number | undefined>(10) // 每页的数量
  const [total, setTotal] = useState<number>(0) // 数据总数
  const [pages, setPages] = useState<number>(1) // 总页数
  /** *分页用 end***/

  const [phone, setPhone] = useState<string>("") // 医生手机号
  const [username, setUsername] = useState<string>("") // 医生姓名

  const [loading, setLoading] = useState<boolean>(false)
  const [table, setTable] = useState<Array<consultGroupUserPageLisRecord>>([])// 成员列表

  const Iquery = history.location.query as any

  // 切换页数
  const pageOnChange = (pageNumber: number, pageSize?: number | undefined) => {
    setSize(pageSize)
    setCurrent(pageNumber)
  }
  const showTotal = (total: number, range: number[]) => {
    const page = <div style={{ color: "#999" }}>
      共 {total} 条记录  第 <span style={{ color: "black" }} >{current}</span>   / {pages} 页
    </div>
    return page // `共${total}条记录  第${current}/${Math.ceil(total / 10)}页`
  }


  // 获取小组列表
  const initPageList = async () => {

    setLoading(true)
    let obj: IConsultGroupUserPageList = {
      groupId: Number(Iquery.groupId),
      phone,
      username,
      current,
      size
    }

    const [err, res] = await userPageList(obj)
    console.log(111, res)
    if (err) {
      setLoading(false)
      return message.error(err.message)
    }
    setLoading(false)
    setTable(res.data.records)
    setTotal(res.data.total)
    setPages(res.data.pages)
  }

  // 渲染中间内容
  const ShowContent = () => {

    if (!table || table.length === 0) {
      return <Empty className="emptyClass" image={Empty.PRESENTED_IMAGE_SIMPLE} />
    }

    let con = <>
      {
        table.map((item) => {
          return (
            <div key={item.id} className={styles.item} >
              <div className={styles.itemCon}  >
                <div className={styles.topTitle} >{item.deptName}</div>
                <div className={styles.desc}>
                  <div className={styles.descTop}>
                    <div>
                      <div> <span className={styles.descTopName}>{item.name}</span> <span className={styles.descTopNameSapn} >{item.titleName}</span>  </div>
                      <div className={styles.descTopNameSapn}> <span>{item.sexRes}</span> <span className={styles.hx} >|</span>     <span>{item.contactPhone}</span></div>
                    </div>
                    <div><img className={styles.img} src={item.photo} /></div>
                  </div>
                  <div className={styles.hisName} >{item.hospitalName}</div>
                  <div className={styles.text}>
                    擅长：{item.profession ? item.profession : "暂无"}
                  </div>
                </div>
              </div>
            </div>
          )
        })
      }
    </>
    return con
  }


  const phoneChange = (e: React.ChangeEvent<HTMLInputElement>, type: string) => {
    if (type === "phone") {
      setPhone(e.target.value)
    }

    if (type === "username") {
      setUsername(e.target.value)
    }

  }


  const souEvent = () => {
    if (!phone && !username) {
      message.info("请输入手机号或者用户名")
      return
    }
    initPageList()
  }

  const rest = () => {
    setPhone("")
    setUsername("")
  }



  // 初始化
  useEffect(() => {
    initPageList()
  }, [current, size])

  return (
    <div className={styles.teamMember} >
      <div className={styles.top}>
        <div className={styles.left} >全部组员（{total}）</div>
        <div className={styles.right}>
          <Input value={phone} onChange={(e) => phoneChange(e, "phone")} style={{ marginRight: "20px" }} placeholder="医生手机号码" />
          <Input value={username} onChange={(e) => phoneChange(e, "username")} placeholder="医生姓名" />
          <Button onClick={souEvent} style={{ margin: " 0 10px 0 40px" }} type="primary" size="middle" >搜索</Button>
          <Button onClick={rest} size="middle" >重置</Button>
        </div>
      </div>

      <div className={styles.content}>
        <ShowContent />
      </div>


      <Pagination
        style={{ textAlign: "center" }}
        size="small"
        total={total}
        hideOnSinglePage={false}
        showQuickJumper
        pageSize={size}
        showTotal={showTotal}
        onChange={pageOnChange}
      />



    </div >
  )
}

export default teamMember
